DAY 15：前端 UI 框架：Material UI 基礎配置與主題設定

2026 iThome 鐵人賽

DAY 15

佛心分享-SideProject30

就決定是你了！打造寶可夢持有追蹤系統 (React x Express)系列第 15 篇

18th鐵人賽

٩۹(๑•̀ω•́ ๑)۶

2026-08-23 06:41:38

68 瀏覽

分享至

今日目標說明

俗話說「人靠衣裝，佛靠金裝」，一個系統就算後端再穩，如果介面醜醜的，朋友肯定是不想用的！為了快速打造美觀且具備 RWD (響應式) 的介面，我們選擇了 Material UI (MUI) 作為前端組件庫。今天我們就來把 MUI 安裝好，並設定專屬的主題配色。

【架構決策對比】為什麼選 MUI 而不是 Tailwind CSS？

在現代前端開發中，最常被拿來比較的兩套樣式解決方案就是 MUI (組件庫) 與 Tailwind CSS (Utility-first CSS)。我們為什麼選 MUI 呢？

比較項目	Material UI (本專案選用)	Tailwind CSS
開發速度	極快。直接提供寫好的 `<Button>`, `<Card>`，連動畫跟點擊波紋都包辦了。	中等。需要自己用 `bg-blue-500 rounded-lg shadow-md` 慢慢刻出按鈕。
客製化彈性	中等。如果想大幅度改變預設的 Material Design 風格，覆寫樣式會比較辛苦。	極高。完全沒有預設的組件包袱，想長怎樣就長怎樣。
適用情境	後台系統、需要快速產出且風格一致的專案。 (非常適合我們這個 Side Project！)	高度客製化設計稿、C端大型產品。

因為我們的目標是快速且漂亮地上線，MUI 絕對是性價比最高的選擇！

核心程式碼片段

在 src/main.tsx (或 App.tsx) 中引入 ThemeProvider 與 CssBaseline，我們定義了藍色系的寶可夢主題風格：

import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';

// 自訂系統主題配色
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // 寶可夢經典藍色調
    },
    background: {
      default: '#f8fafc',
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
  },
});

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline /> {/* 抹平各瀏覽器預設樣式差異，讓背景變乾淨 */}
      <App />
    </ThemeProvider>
  </React.StrictMode>
);